<template>
  <div class="div_article">
    <div class="title">{{ obj[vm.title] }}</div>
    <div class="aside list">
      <div class="aside_1 col-12">
        <span class="tag ellipsis_1 mr-1">{{ obj[vm.tag] }}</span>

        <router-link to="obj[vm.url]" v-if="obj[vm.source]">
          <span class="source">{{ obj[vm.source] }}</span>
        </router-link>

        <span class="time">{{ obj[vm.create_time] }}</span>
      </div>

      <div class="aside_2 col-12 col-sm-6">
        <div class="praise">
          <span>点赞数：{{ obj[vm.praise_len] }}</span>
        </div>
        <div class="see">
          <span>点击数：{{ obj[vm.hits] }}</span>
        </div>
      </div>

      <div class="btns_add col-12 col-sm-6">
        <!-- 收藏按钮 -->
        <div
          v-if="check_collected"
          class="collect_btn collect_change"
          @click="add_collect()"
        >
          <b-icon icon="heart-fill" class="icon icon_change"></b-icon>
          <span class="word_change">收藏</span>
        </div>
        <div v-else class="collect_btn" @click="add_collect()">
          <b-icon icon="heart" class="icon"></b-icon>
          <span>收藏</span>
        </div>

        <!-- 点赞按钮 -->
        <div
          v-if="check_praised"
          class="praise_btn praise_change"
          @click="add_praise()"
        >
          <b-icon icon="hand-thumbs-up" class="icon icon_change"></b-icon
          ><span class="word_change">点赞</span>
        </div>
        <div v-else class="praise_btn" @click="add_praise()">
          <b-icon icon="hand-thumbs-up" class="icon"></b-icon>
          <span>点赞</span>
        </div>
      </div>
    </div>
    <div class="description">{{ obj[vm.description] }}</div>
    <div v-html="obj[vm.content]" class="content"></div>
  </div>
</template>

<script>
export default {
  props: {
    obj: {
      type: Object,
      default: function () {
        return {};
      },
    },
    vm: {
      type: Object,
      default: function () {
        return {
          img: "img",
          tag: "tag",
          url: "url",
          title: "title",
          source: "source",
          description: "description",
          content: "content",
          create_time: "create_time",
          hits: "hits",
          praise_len: "praise_len",
        };
      },
    },
  },
  data() {
    return {
      // 是否已点赞
      check_praised: false,
      // 是否已收藏
      check_collected: false,
    };
  },
  methods: {
    // 添加点赞
    add_praise() {
      var body = {
        source_table: "article",
        source_field: "article_id",
        source_id: this.obj.article_id,
        user_id: this.$store.state.user.user_id,
      };
      if (!this.check_praised) {
        this.check_praised = true;
        this.$post("~/api/praise/add?", body, (res) => {
          this.obj.praise_len += 1;
          console.log(res);
        });
      } else {
        this.check_praised = false;
        this.$get("~/api/praise/del", body, (res) => {
          this.obj.praise_len -= 1;
          console.log(res);
        });
      }
    },
    // 添加收藏
    add_collect() {
      var { title, img, article_id } = this.obj;
      var body = {
        title,
        img,
        source_table: "article",
        source_field: "article_id",
        source_id: article_id,
        user_id: this.$store.state.user.user_id,
      };
      if (!this.check_collected) {
        this.check_collected = true;
        this.$post("~/api/collect/add?", body, (res) => {
          this.$toast("收藏成功");
          console.log(res);
        });
      } else {
        this.check_collected = false;
        this.$get("~/api/collect/del", body, (res) => {
          this.$toast("取消收藏");
        });
      }
    },
  },
};
</script>

<style scoped>
.ellipsis_1 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
}
div {
  user-select: none;
}

.div_article {
  padding: 1.5rem 1rem;
}

.aside {
  display: flex;
  justify-content: space-between;
	align-items: center;
  flex-wrap: wrap;
  margin: 0 0.625rem 0.625rem 0;
  font-size: 0.875rem;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  color: rgba(0, 0, 0, 0.3);
}

.aside>*{
  display: flex;
	align-items: center;
	height: 2rem;
}

.source {
  color: #576b95;
}

.tag {
  display: flex;
  align-items: center;
  padding: 0 0.25rem;
  font-size: 0.75rem;
  border-radius: 0.125rem;
  background: rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.3);
}

.collect_btn,
.praise_btn {
	margin-right: 0.5rem;
  display: flex;
  white-space: nowrap;
  padding: 0.125rem 0.5rem;
  border-radius: 0.25rem;
  color: var(--color_base);
  border: 1px solid var(--color_default);
  cursor: pointer;
}

.icon_change {
  color: var(--color_primary);
}

.collect_btn:hover {
  border: 1px solid var(--color_primary);
  color: var(--color_primary);
}

.praise_btn:hover {
  border: 1px solid var(--color_primary);
  color: var(--color_primary);
}

.icon {
  font-size: 15px;
  margin: 3px;
}

.word_change {
  color: var(--color_primary);
  font-weight: bold;
}

.title {
  font-size: 1.35rem;
  line-height: 1.4;
  margin-bottom: 30px;
  font-weight: 400;
}

.time {
  position: relative;
  top: 0.125rem;
}

.description {
  margin-bottom: 1rem;
  color: #292828;
}

.div_article .see {
  margin-left: 1rem;
}

.div_article .time {
  color: #999;
}
</style>
